import { Component, OnInit, ViewChild } from '@angular/core';
import { ViewsserviceService } from '../../../services/viewsservice.service';
import { fromEvent } from 'rxjs';
import { NzMessageService } from 'ng-zorro-antd';
import { HttpService } from '../../../services/http.service';
import { opusNewestUrl,glanceOverimageUrl } from '../../../urlConfig';

@Component({
  selector: 'app-opus-display',
  templateUrl: './opus-display.component.html',
  styleUrls: ['./opus-display.component.styl']
})
export class OpusDisplayComponent implements OnInit {
  public nzSpan: number; // 栅格数
  list = []; // 存放最新的3个作品
  imgPrefixUrl :string = glanceOverimageUrl; // 预览图片地址前缀
  @ViewChild('img') image: any;
  constructor(public service: ViewsserviceService, private message: NzMessageService, public http: HttpService) { }

  ngOnInit() {
    var obj: object = {
      judge: 1,
      windowWidth: 1000, // 要监听的窗口宽度
      trueValue: 24, // 当判断为 true 时要返回的参数
      flaseValue: 6, //当判断为 flase 时要返回的参数
    }
    this.service.getInitWindowWidth(obj).subscribe((event) => {
      this.nzSpan = event;
    })
    // 监听窗口宽度(当窗口大小发生变化时)
    fromEvent(window, 'resize')
      //.debounceTime(100) // 以免频繁处理
      .subscribe((event) => {
        this.service.getInitWindowWidth(obj).subscribe((event) => {
          this.nzSpan = event;
        })
      });
    // 获取最新的三个作品
    this.http.getData(opusNewestUrl).subscribe((event: any) => {
      // console.log(event);
      this.list = event.data
    })

  }
  // ngAfterViewInit(): void {
  //   var element: any = document.querySelectorAll(".opus-display-img");
  //   var element1: any = document.querySelectorAll(".opus-display-details");
  //   var element2: any = document.querySelectorAll(".describe");
  //   for (let i = 0; i < element.length; i++) {
  //     fromEvent(element[i], 'mouseenter').subscribe(event => {
  //       element1[i].classList.add('zindex');
  //     })
  //     fromEvent(element2[i], 'mouseenter').subscribe(event => {
  //       element1[i].classList.add('zindex');

  //     })
  //     // mousedown onmouseup
  //     fromEvent(element1[i], 'mousedown').subscribe(event => {
  //       element1[i].classList.add('zindex');

  //     })
  //   }
  // }
  createMessage(type: string): void {
    this.message.create(type, `详情页正在开发中，敬请期待！`);
  }
}
